import React, { Component } from 'react';
import { createForm } from 'rc-form'
import { Button, Input } from 'antd'

const nameRoles = {require: true, message: '请输入姓名！'}
const passworldRoles = {require: true, message: '请输入密码！'}

// 不支持装饰器写法
// @createForm
class MyRCFrom extends Component {
    constructor(props){
        super(props)
        this.state = {
            username: '',
            password: ''
        }
    }

    componentDidMount(){
        const { setFieldsValue } = this.props.form
        setFieldsValue({
            username: '123'
        })
    }

    usernameChange = (e) => {
        this.setState({
            username: e.target.value
        })
    }

    passwordChange = (e) => {
        this.setState({
            password: e.target.value
        })
    }

    submit = () => {
        const { getFieldsValue, getFieldValue } = this.props.form
        console.log(getFieldsValue(), getFieldValue('username'))
    }

    render() {
        const { getFieldDecorator } = this.props.form
        return (
            <div>
                <h3> MyRCFrom </h3>
                {getFieldDecorator('username', {rules: [nameRoles]})(
                    <Input placeholder="username"
                />)}
                {getFieldDecorator('password', {rules: [passworldRoles]})(
                    <Input placeholder="password" 
                />)}
                <Button onClick={this.submit}>submit</Button>
            </div>
        );
    }
}

export default createForm()(MyRCFrom);